<style>
  * {
    margin: 0;
    padding: 0;
  }
  #app {
    height: 100%;
    width: 100%;
    background-color: skyblue;
  }
  #drag {
    width: 100px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: coral;
    color: #fff;
    cursor: pointer;
  }
</style>
<div id="app">
  <div id="drag" draggable="true">可拖拽</div>
</div>
<script>
  function throttle(fn, delay = 1000) {
    let timer = null;
    return function () {
      if (timer) {
        return;
      }
      timer = setTimeout(() => {
        fn.apply(this, arguments);
        timer = null;
      }, delay);
    };
  }
  let d = document.querySelector("#drag");
  d.addEventListener(
    "drag",
    throttle((e) => {
      console.log(e.clientX, e.clientY);
    })
  );
</script>
